<template>
	<view :class="fx==='H'?'H imageItem':'S imageItem'">
		<navigator @click="navigatorHandler" :url="`/pages/imageList/imageList?${params}`">
			<video autoplay loop muted :controls='false' object-fit='cover'
				 v-if="type==='video'" :src="src">
			</video>
			<image lazy-load  v-else :src="src" mode="aspectFill"></image>
		</navigator>
		
		<text>{{title}}</text>
	</view>
</template>

<script setup>
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		src: {
			type: String,
			default: ''
		},
		fx: {
			type: String,
			default: 'H'
		},
		type: {
			type: String,
			default: ''
		},
		params: {
			type: String,
			default: ''
		}
	})
	
	const navigatorHandler = () => {
		// 设置本地缓存
		try{
			uni.setStorageSync('title', props.title)
		}catch(e){
			//TODO handle the exception
			console.log(e);	
		}

	}
	
</script>

<style scoped lang="scss">
	.S{
		width: 220rpx;
		height: 340rpx;
	}
	.H{
		width: 340rpx;
		height: 220rpx;
	}
	.imageItem {
		position: relative;
		overflow: hidden;
		border-radius: 15rpx;
		margin: 10rpx 0;
		navigator{
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
		

		text {
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: rgba(83, 83, 83, 0.1);
			// 背景模糊滤镜
			backdrop-filter: blur(20rpx);
		}
	}
</style>